{extend name="public/container"}
{block name='head_top'}
{/block}
{block name="content"}
<div id="myApp" v-cloak>
    <div class="add-page-title flex flex-between padding-20">
        <div class="title">设置默认分佣比例</div>
        <el-link :underline="false" type="primary" @click="edit=true" v-if="!edit">编辑</el-link>
    </div>
    <div class="padding-10">
        <el-form :model="formData" :rules="rules" ref="formData" label-width="100px" >
            <el-form-item label="">
                <el-table
                    :data="formData.default_commission"
                    style="width: 100%">
                    <el-table-column
                        prop="level_name"
                        label="推广等级">
                    </el-table-column>

                    <el-table-column
                        prop="separate"
                        label="直推佣金%">
                        <template slot-scope="scope">
                            <template v-if="!edit">
                                {{ scope.row.separate }}
                            </template>
                            <template v-else>
                                <el-input-number
                                    :controls="false"
                                    :min="0"
                                    :max="100"
                                    v-model="scope.row.separate"
                                    :placeholder="scope.row.level_name + '直推佣金'"
                                    autocomplete="off">
                                </el-input-number>
                            </template>
                        </template>
                    </el-table-column>

                    <el-table-column
                        prop="fission"
                        label="裂变佣金%">
                        <template slot-scope="scope">
                            <template v-if="!edit">
                                {{ scope.row.separate }}
                            </template>
                            <template v-else>
                                <el-input-number
                                    :controls="false"
                                    :min="0"
                                    :max="100"
                                    v-model="scope.row.fission"
                                    :placeholder="scope.row.level_name + '裂变佣金'"
                                    autocomplete="off">
                                </el-input-number>
                            </template>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form-item>

            <el-form-item v-if="edit">
                <el-button type="primary" @click="doSave('formData')">确 定</el-button>
                <el-button @click="edit = false">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</div>
{/block}

{block name="script"}
<script>
    var data    = <?=isset($data) ? $data : "{}"?>;

    var my = new Vue({
        el: "#myApp",
        data: {
            formData: {
                id: data.id || 0,
                default_commission:[
                    {
                        level_key:'senior',
                        level_name:"{:lang('Senior Partner')}",
                        separate:0,
                        fission:0,
                    },
                    {
                        level_key:'first',
                        level_name:"{:lang('First Partner')}",
                        separate:0,
                        fission:0,
                    },
                    {
                        level_key:'second',
                        level_name:"{:lang('Second Partner')}",
                        separate:0,
                        fission:0,
                    },
                    {
                        level_key:'third',
                        level_name:"{:lang('Third Partner')}",
                        separate:0,
                        fission:0,
                    }
                ]
            },
            rules: {
                
            },
            edit:false
        },
        methods: {
            doLoadDefaultCommission ( ) {
                axios.get(Url({a:'default_commission'}))
                .then(res => {
                    this.formData.default_commission = res.data.data
                })
            },
            doSave(formName) {
                this.$refs[formName].validate((valid) => {
                    if ( valid ) {
                        axios.post(Url({a:'save_default_commission'}) , this.formData).then(res => {
                            this.$message({
                                message: res.data.msg,
                                type: res.data.code === 200 ? 'success' : 'error',
                            });
                        }).catch(_ => {
                            this.$message({
                                message: '操作失败',
                                type: 'error'
                            })
                        })
                    }
                });
            }
        },
        mounted(){
            this.doLoadDefaultCommission()  
        }
    })
</script>
{/block}